<template>
  <div class="cardPage">
    <div class="topCard">
      <div class="avatar">
        <a-avatar :size="71" :src="userInfo.avatar" v-if="!!userInfo.avatar"></a-avatar>
        <a-avatar v-else :size="71">
          <template #icon><User-Outlined /></template>
        </a-avatar>
        <div class="userInfo">
          <span>
            {{ userInfo.realName || '未知人员' }}
          </span>
          <!-- <p v-if="userRole == 0">(巡检员)</p>
            <p v-if="userRole == 4">(院领导)</p> -->
          <div>
            {{ userInfo.deptInfo?.[0].deptName }}
            <!-- &nbsp;&nbsp;
              已巡检<font>254</font>天 -->
          </div>
        </div>
      </div>
      <div class="inline"></div>
      <div class="bottomData">
        <div class="itemData">
          <p class="num">{{ ElectricityInfo.dayEnergy }}度</p>
          <span class="numName">今日用电量</span>
          <div class="plus" :class="ElectricityInfo.dayMom >= 0 || 'green'">{{ ElectricityInfo.dayMom >= 0 ? '+' : '-'
            }}{{ ElectricityInfo.dayMom }}%</div>
        </div>
        <div class="itemData">
          <p class="num">{{ ElectricityInfo.avgDayEnergy }}度</p>
          <span class="numName">日均用电量</span>
          <div class="plus" :class="ElectricityInfo.weekMom >= 0 || 'green'">{{ ElectricityInfo.weekMom >= 0 ? '+' : '-'
            }}{{ ElectricityInfo.weekMom }}%</div>
        </div>
        <div class="itemData">
          <p class="num">{{ WaterInfo.dayEnergy }}吨</p>
          <span class="numName">今日用水量</span>
          <div class="plus" :class="WaterInfo.dayMom >= 0 || 'green'">{{ WaterInfo.dayMom >= 0 ? '+' : '-' }}{{
            WaterInfo.dayMom }}%</div>
        </div>
        <div class="itemData">
          <p class="num">{{ WaterInfo.avgDayEnergy }}吨</p>
          <span class="numName">日均用水量</span>
          <div class="plus" :class="WaterInfo.weekMom >= 0 || 'green'">{{ WaterInfo.weekMom >= 0 ? '+' : '-' }}{{
            WaterInfo.weekMom }}%</div>
        </div>
        <div class="itemData">
          <p class="num">{{ LoginInfo.allCount }}</p>
          <span class="numName">告警总数</span>
        </div>
        <div class="itemData">
          <p class="num">{{ LoginInfo.dayAvgCount }}</p>
          <span class="numName">日均告警</span>
        </div>
      </div>
    </div>
    <div class="middleBottomCard">
      <div class="checkRecordTitle">
        <p>设备状态一览</p>
      </div>
      <div class="contentPeople">
        <div class="item">
          <img src="@/assets/images/icon/dev1.png">
          <div class="data">
            <h1>{{ deviceInfo.dev1.count }}</h1>
            <span>设备总数</span>
          </div>
          <div class="data">
            <h1>{{ deviceInfo.dev1.onlineCount }}</h1>
            <span>设备在线</span>
          </div>
          <div class="data">
            <h1>{{ deviceInfo.dev1.count - deviceInfo.dev1.onlineCount }}</h1>
            <span>设备离线</span>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/images/icon/dev2.png">
          <div class="data">
            <h1>{{ deviceInfo.dev2.count }}</h1>
            <span>设备总数</span>
          </div>
          <div class="data">
            <h1>{{ deviceInfo.dev2.onlineCount }}</h1>
            <span>设备在线</span>
          </div>
          <div class="data">
            <h1>{{ deviceInfo.dev2.count - deviceInfo.dev2.onlineCount }}</h1>
            <span>设备离线</span>
          </div>
        </div>
      </div>
    </div>
    <div class="middleBottomCard">
      <div class="checkRecordTitle">
        <p>同比数据总览</p>
        <div class="select">
          <span :class="activeCheck == 1 ? 'active' : ''" @click="MonthEnergy(1)">
            用水
          </span>
          <span :class="activeCheck == 2 ? 'active' : ''" @click="MonthEnergy(2)">
            用电
          </span>
        </div>
      </div>
      <div class="contentFire">
        <div id="lineChart"></div>
      </div>
    </div>

    <div class="middleBottomCard">
      <div class="checkRecordTitle">
        <p>年度消耗趋势总览</p>
        <div class="select">
          <span :class="dayCheck == 1 ? 'active' : ''" @click="DayEnergy(1)">
            用水
          </span>
          <span :class="dayCheck == 2 ? 'active' : ''" @click="DayEnergy(2)">
            用电
          </span>
        </div>
      </div>
      <div class="contentFire">
        <div id="barChart"></div>
      </div>
    </div>

    <div class="middleBottomCard">
      <div class="checkRecordTitle">
        <p>科室水耗总览</p>
        <div class="select">
          <span :class="keshi1 == 1 ? 'active' : ''" @click="keshiEnergy1(1)">
            今日
          </span>
          <span :class="keshi1 == 2 ? 'active' : ''" @click="keshiEnergy1(2)">
            本周
          </span>
          <span :class="keshi1 == 3 ? 'active' : ''" @click="keshiEnergy1(3)">
            本月
          </span>
          <span :class="keshi1 == 4 ? 'active' : ''" @click="keshiEnergy1(4)">
            全年
          </span>
        </div>
      </div>
      <div class="contentFire">
        <div id="keshiChart1"></div>
        <div class="checkNum">
          <div>
            <h3>用水量排名</h3>
          </div>
          <div v-for="(item, index) in keshi1DataList.slice(0, 7)">
            <p :class="index > 2 ? 'num' : ''">{{ index + 1 }}</p>
            <span>{{ item.deptName }}</span>
            <span>{{ item.deptEnergy }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="middleBottomCard">
      <div class="checkRecordTitle">
        <p>科室电耗总览</p>
        <div class="select">
          <span :class="keshi2 == 1 ? 'active' : ''" @click="keshiEnergy2(1)">
            今日
          </span>
          <span :class="keshi2 == 2 ? 'active' : ''" @click="keshiEnergy2(2)">
            本周
          </span>
          <span :class="keshi2 == 3 ? 'active' : ''" @click="keshiEnergy2(3)">
            本月
          </span>
          <span :class="keshi2 == 4 ? 'active' : ''" @click="keshiEnergy2(4)">
            全年
          </span>
        </div>
      </div>
      <div class="contentFire">
        <div id="keshiChart2"></div>
        <div class="checkNum">
          <div>
            <h3>用电量排名</h3>
          </div>
          <div v-for="(item, index) in keshi2DataList.slice(0, 7)">
            <p :class="index > 2 ? 'num' : ''">{{ index + 1 }}</p>
            <span>{{ item.deptName }}</span>
            <span>{{ item.deptEnergy }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="middleBottomCard">
      <div class="checkRecordTitle">
        <p>消息总览</p>
      </div>
      <div class="table-main">
        <ul>
          <li>
            <span>编号</span>
            <span>类型</span>
            <span>位置</span>
            <span>详情</span>
            <span>时间</span>
          </li>
          <li v-for="(k, i) in warningList">
            <span>{{ k.deviceCode }}</span>
            <span>{{ k.type == 1 ? '水表' : '电表' }}</span>
            <span>{{ k.position }}</span>
            <span>{{ k.warningName }}</span>
            <span>{{ k.dateTime }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, inject, nextTick } from "vue"
  import { useRoute } from "vue-router";
  import moment from "moment"
  import { UserOutlined, SettingOutlined } from "@ant-design/icons-vue";
  import * as echarts from 'echarts';
  import { deviceStat, findWarningLogInfoChart, findDeviceInfo, findMonthEnergyMoMChart, findDayEnergyMoMChart, findDeptEnergyChart, selectWarningLogPage } from "@/api/common"
  import { Icon as VanIcon, Popup as VanPopup } from "vant"

  const userInfo = ref({});
  const activeCheck = ref(1);
  const dayCheck = ref(1);
  const keshi1 = ref(1);
  const keshi2 = ref(1);
  const keshi1DataList = ref([]);
  const keshi2DataList = ref([]);
  const LoginInfo = ref({});
  const WaterInfo = ref({});
  const ElectricityInfo = ref({});
  const deviceInfo = ref({
    dev1: {},
    dev2: {}
  });
  const warningList = ref([]);

  onMounted(() => {
    userInfo.value = JSON.parse(localStorage.getItem("SAVE_USER_INFO"));
    deviceStat().then(res => {
      res.data.forEach(item => {
        if (item.type == 1) {
          deviceInfo.value.dev1 = item
        }
        if (item.type == 2) {
          deviceInfo.value.dev2 = item
        }
      })
    })
    findWarningLogInfoChart().then(res => {
      LoginInfo.value = res.data
    })
    findDeviceInfo(1).then(res => {
      WaterInfo.value = res.data
    })
    findDeviceInfo(2).then(res => {
      ElectricityInfo.value = res.data
    })
    MonthEnergy(1)
    DayEnergy(1)
    keshiEnergy1(1)
    keshiEnergy2(1)
    selectWarningLogPage({ pageNo: 1, pageSize: 10 }).then(res => {
      warningList.value = res.data.records
    })
  })

  function MonthEnergy(val) {
    activeCheck.value = val
    findMonthEnergyMoMChart({ type: val, deptId: null }).then(res => {
      setLineData(res.data)
    })
  }

  function DayEnergy(val) {
    dayCheck.value = val
    findDayEnergyMoMChart({ type: val }).then(res => {
      setBarData(res.data)
    })
  }

  function keshiEnergy1(val) {
    keshi1.value = val
    let obj = {}
    if (val == 1) {
      obj = {
        type: 1,
        startDate: moment().format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD')
      }
    }
    if (val == 2) {
      obj = {
        type: 1,
        startDate: moment().subtract(7, 'days').format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD')
      }
    }
    if (val == 3) {
      obj = {
        type: 1,
        startDate: moment().format('YYYY-MM-01'),
        endDate: moment().format('YYYY-MM-DD')
      }
    }
    if (val == 4) {
      obj = {
        type: 1,
        startDate: moment().format('YYYY-01-01'),
        endDate: moment().format('YYYY-MM-DD')
      }
    }
    findDeptEnergyChart(obj).then(res => {
      keshi1DataList.value = res.data
      setTimeout(() => {
        setKeshi1Chart(res.data)
      }, 300)
    })
  }

  function keshiEnergy2(val) {
    keshi2.value = val
    let obj = {}
    if (val == 1) {
      obj = {
        type: 2,
        startDate: moment().format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD')
      }
    }
    if (val == 2) {
      obj = {
        type: 2,
        startDate: moment().subtract(7, 'days').format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD')
      }
    }
    if (val == 3) {
      obj = {
        type: 2,
        startDate: moment().format('YYYY-MM-01'),
        endDate: moment().format('YYYY-MM-DD')
      }
    }
    if (val == 4) {
      obj = {
        type: 2,
        startDate: moment().format('YYYY-01-01'),
        endDate: moment().format('YYYY-MM-DD')
      }
    }
    findDeptEnergyChart(obj).then(res => {
      keshi2DataList.value = res.data
      setTimeout(() => {
        setKeshi2Chart(res.data)
      }, 300)
    })
  }

  function setKeshi1Chart(data) {
    var chartDom = document.getElementById('keshiChart1');
    var myChart = echarts.init(chartDom);
    myChart.resize()
    var option;
    option = {
      grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        top: "5%",
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        confine: true
      },
      xAxis: {
        type: 'category',
        show: true,
        data: data.map(item => item.deptName),
        axisTick: {
          show: false,
          alignWithLabel: true,
          lineStyle: {
            width: 1
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#86909C',
            fontSize: 7
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#E5E6EB",
            width: 1,
            opacity: 0.4
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#4E5969',
              fontSize: 6
            },
            formatter: '{value} 吨'
          },
          splitLine: {
            lineStyle: {
              color: '#F2F3F5',
              width: 1,
              opacity: 0.4
            }
          }
        }
      ],
      series: [
        {
          name: '水耗',
          data: data.map(item => item.deptEnergy),
          type: 'bar',
          barWidth: 8,
          itemStyle: {
            normal: {
              color: '#36CBCB'
            }
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 吨'
            }
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }

  function setKeshi2Chart(data) {
    var chartDom = document.getElementById('keshiChart2');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        top: "5%",
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        confine: true
      },
      xAxis: {
        type: 'category',
        show: true,
        data: data.map(item => item.deptName),
        axisTick: {
          show: false,
          alignWithLabel: true,
          lineStyle: {
            width: 1
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#86909C',
            fontSize: 7
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#E5E6EB",
            width: 1,
            opacity: 0.4
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#4E5969',
              fontSize: 6
            },
            formatter: '{value} 度'
          },
          splitLine: {
            lineStyle: {
              color: '#F2F3F5',
              width: 1,
              opacity: 0.4
            }
          }
        }
      ],
      series: [
        {
          name: '电耗',
          data: data.map(item => item.deptEnergy),
          type: 'bar',
          barWidth: 8,
          itemStyle: {
            normal: {
              color: '#36CBCB'
            }
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 度'
            }
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }

  function setBarData(data) {
    var chartDom = document.getElementById('barChart');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      grid: {
        left: '0%',
        right: '5%',
        bottom: '0%',
        top: "5%",
        containLabel: true
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        show: true,
        data: data.dayEnergy.map(item => item.date.slice(5, 10)),
        axisTick: {
          show: false,
          alignWithLabel: true,
          lineStyle: {
            width: 1
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#86909C',
            fontSize: 7
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#E5E6EB",
            width: 1,
            opacity: 0.4
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          name: "当日",
          axisLabel: {
            show: true,
            textStyle: {
              color: '#4E5969',
              fontSize: 6
            },
            formatter: '{value} ' + (dayCheck.value == 1 ? '吨' : '度')
          },
          splitLine: {
            lineStyle: {
              color: '#F2F3F5',
              width: 1,
              opacity: 0.4
            }
          }
        },
        {
          type: 'value',
          name: '本年同比',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#4E5969',
              fontSize: 6
            },
            formatter: '{value} %'
          },
          splitLine: {
            lineStyle: {
              color: '#F2F3F5',
              width: 1,
              opacity: 0.4
            }
          }
        }
      ],
      series: [
        {
          name: '当份',
          data: data.dayEnergy.map(item => item.dayEnergy),
          type: 'bar',
          barWidth: 8,
          itemStyle: {
            normal: {
              color: '#36CBCB'
            }
          },
          tooltip: {
            valueFormatter: function (value) {
              if(dayCheck.value == 1) {
                return value + ' 吨';
              } else {
                return value + ' 度'
              }
            }
          }
        },
        {
          name: '本年同比',
          data: data.dayEnergyMoM.map(item => item.dayEnergyMom),
          type: 'line',
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: '#1890FF'
            }
          },
          showSymbol: false,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %'
            }
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }

  function setLineData(data) {
    var chartDom = document.getElementById('lineChart');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        top: "5%",
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        confine: true
      },
      xAxis: {
        type: 'category',
        show: true,
        data: data.thisYearMonth.map(item => item.month.slice(5, 7)),
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          interval: 0,
          textStyle: {
            color: '#86909C',
            fontSize: 7
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#E5E6EB",
            width: 1,
            opacity: 0.4
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#F2F3F5',
            width: 1,
            opacity: 0.4
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#4E5969',
            fontSize: 8
          },
          formatter: '{value} ' + (activeCheck.value == 1 ? '吨' : '度')
        },
        splitLine: {
          lineStyle: {
            color: '#F2F3F5',
            width: 1,
            type: "dashed",
            opacity: 0.4
          }
        }
      },
      series: [
        {
          data: data.thisYearMonth.map(item => item.monthEnergy),
          type: 'line',
          smooth: true,
          showSymbol: false,
          name: activeCheck.value == 1 ? "今年用水量" : "今年用电量",
          tooltip: {
            valueFormatter: function (value) {
              if(activeCheck.value == 1) {
                return value + ' 吨';
              } else {
                return value + ' 度'
              }
            }
          }
        },
        {
          data: data.lastYearMonth.map(item => item.monthEnergy),
          type: 'line',
          smooth: true,
          showSymbol: false,
          name: activeCheck.value == 1 ? "去年用水量" : "去年用电量",
          tooltip: {
            valueFormatter: function (value) {
              if(activeCheck.value == 1) {
                return value + ' 吨';
              } else {
                return value + ' 度'
              }
            }
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }
</script>

<style lang="less" scoped>
  .cardPage {
    min-height: 100vh;
    background-color: rgb(246, 247, 249);
    padding: 15px 20px;

    .topCard {
      background-color: #ffffff;
      width: 100%;
      margin-top: 27px;
      border-radius: 13px;
      padding: 8px;
      box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);

      .avatar {
        display: flex;

        .ant-avatar.ant-avatar-icon {
          position: relative;
          top: -26px;
          margin-left: 15px;
        }

        .userInfo {
          margin-left: 18px;
          white-space: nowrap;

          span {
            color: #323232;
            font-size: 16px;
            font-weight: 500;
            text-align: left;
            line-height: 21px;
          }

          p {
            color: #323232;
            font-weight: 500;
            font-size: 12px;
            display: inline-block;
            margin: 0;
            margin-left: 5px;
          }

          >div {
            color: #9E9E9E;
            font-size: 12px;
            font-weight: 500;
            text-align: left;

            font {
              color: #F07979;
            }
          }
        }
      }

      .inline {
        background-color: #D8D8D8;
        height: 1px;
      }

      .bottomData {
        display: flex;
        margin-top: 13px;
        margin-bottom: 16px;

        .itemData {
          flex: 1;
          position: relative;

          img {
            float: left;
            width: 16px;
            height: 15px;
            margin-top: 4px;
            margin-right: 8px;
          }

          p.num {
            color: #464646;
            text-align: center;
            margin: 0;
            padding: 6px 5px;
            font-size: 9px;
            line-height: 6px;
            white-space: nowrap;
          }

          span.numName {
            color: #9E9E9E;
            transform-origin: left;
            text-align: center;
            display: block;
            font-size: 9px;
            white-space: nowrap;
          }

          div.plus {
            position: absolute;
            background-color: red;
            color: #ffffff;
            border-radius: 11px;
            height: 11px;
            font-size: 8px;
            font-style: normal;
            padding: 0 2px;
            line-height: 11px;
            right: 10%;
            top: -20%;
          }

          div.green {
            background-color: #52C41A;
          }
        }

        .itemData:not(:last-child) {
          border-right: 1px solid #D8D8D8;
        }
      }
    }

    .middleBottomCard {
      background-color: #ffffff;
      width: 100%;
      margin-top: 11px;
      border-radius: 13px;
      padding: 8px;
      box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);

      .title {
        font-size: 12px;
        font-weight: 500;
        text-align: left;
        border-left: 3px solid #4DC6D3;
        margin: 0;
        padding-left: 8px;
        line-height: 16px;
        margin-left: 5px;
        margin-top: 3px;
      }

      .checkRecordTitle {
        display: flex;
        justify-content: space-between;
        margin-left: 5px;
        margin-top: 5px;

        p {
          font-size: 12px;
          font-weight: 500;
          text-align: left;
          border-left: 3px solid #4DC6D3;
          margin: 0;
          padding-left: 8px;
          line-height: 16px;
        }

        .select {
          display: flex;
          height: 16px;
          font-size: 7px;
          font-weight: 500;
          color: #4E5969;
          text-align: center;
          background-color: #F2F3F8;
          justify-content: space-around;
          line-height: 12px;
          padding: 2px;
          letter-spacing: 1px;
          white-space: nowrap;

          span {
            display: block;
            width: 100%;
            cursor: pointer;
            padding: 0 5px;
          }

          span.active {
            color: #1664FF;
            background: #ffffff;
          }
        }
      }

      .contentPeople {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        margin-left: 8px;
        margin-right: 8px;

        .item {
          display: flex;
          justify-content: space-between;

          img {
            height: 20px;
          }

          .data {
            margin-left: 5px;

            h1 {
              color: #414141;
              font-size: 10px;
              font-weight: 700;
              text-align: center;
              margin: 0;
              height: 10px;
              line-height: 10px;
            }

            span {
              display: block;
              color: #9E9E9E;
              font-size: 8px;
              font-weight: 400;
              white-space: nowrap;
              width: 40px;
              text-align: center;
            }
          }
        }

        .item:not(:last-child) {
          border-right: 1px solid #D8D8D8;
          padding-right: 4.5%;
        }
      }

      .contentFire {
        display: flex;
        justify-content: space-around;

        .checkNum {
          div {
            width: 112px;
            background-size: 100% 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 3px;
            margin-bottom: 5px;

            h3 {
              font-size: 10px;
              color: #000000;
              font-weight: 100;
              width: 100%;
              text-align: left;
            }

            p {
              margin: 0;
              color: #ffffff;
              font-size: 8px;
              font-weight: 100;
              white-space: nowrap;
              margin-right: 10px;
              line-height: 12px;
              width: 11px;
              height: 11px;
              border-radius: 11px;
              background-color: #314659;
              text-align: center;
            }

            span {
              display: block;
              font-size: 8px;
              color: #468DC7;
              font-weight: 700;
              text-align: center;
              white-space: nowrap;
              line-height: 12px;
            }

            p.num {
              background: #F0F2F5;
              color: #000000;
            }
          }
        }
      }

      .table-main {
        ul li {
          display: flex;
          justify-content: space-around;
          font-size: 12px;
          font-weight: 100;
          margin-bottom: 2px;

          span {
            white-space: nowrap;
            width: 15%;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          span:nth-child(4) {
            width: 31%;
          }

          span:nth-child(5) {
            width: 24%;
          }
        }

        ul li:not(:nth-child(1)) {
          font-size: 9px;
        }
      }
    }
  }

  #barChart {
    width: 340px;
    height: 130px;
    margin: 14px 0 0 10px;
  }

  #lineChart {
    width: 320px;
    height: 130px;
    margin: 14px 0 0 20px;
  }

  #keshiChart1 {
    width: 180px;
    height: 130px;
    margin: 14px 0 0 0px;
  }

  #keshiChart2 {
    width: 180px;
    height: 130px;
    margin: 14px 0 0 0px;
  }
</style>